<script setup>
/**
 * 根组件 - 负责应用的整体布局和状态管理
 */

import { ref, onMounted } from 'vue'
import ChatWindow from './components/ChatWindow.vue'
import { sendMessage as sendToAPI } from './services/api'

// 响应式状态
const messages = ref([]) // 存储聊天消息列表
const isLoading = ref(false) // 加载状态
const isDark = ref(false) // 深色模式状态
const hasWelcomed = ref(false) // 是否已发送欢迎消息

/**
 * 发送消息处理函数
 * @param {string} message - 用户输入的消息内容
 */
const sendMessage = async (message) => {
  isLoading.value = true
  // 添加用户消息到消息列表
  messages.value.push({ role: 'user', content: message, timestamp: new Date() })
  
  try {
    // 调用API发送消息并获取响应
    const response = await sendToAPI(message)
    // 添加AI回复到消息列表
    messages.value.push({ 
      role: 'assistant', 
      content: response,
      timestamp: new Date()
    })
  } catch (error) {
    // 处理API请求失败情况
    messages.value.push({ 
      role: 'assistant', 
      content: '抱歉，请求失败，请稍后再试',
      timestamp: new Date()
    })
  } finally {
    isLoading.value = false
  }
}

/**
 * 发送欢迎消息
 */
const sendWelcomeMessage = async () => {
  if (hasWelcomed.value) return
  
  isLoading.value = true
  try {
    const response = await sendToAPI('你好！我是AI助手，很高兴为你服务。')
    messages.value.push({
      role: 'assistant',
      content: response,
      timestamp: new Date()
    })
  } catch (error) {
    // 如果API请求失败，使用默认欢迎消息
    messages.value.push({
      role: 'assistant',
      content: '你好！我是AI助手，很高兴为你服务。',
      timestamp: new Date()
    })
  } finally {
    isLoading.value = false
    hasWelcomed.value = true
  }
}

/**
 * 切换深色/浅色模式
 */
const toggleDarkMode = () => {
  isDark.value = !isDark.value
  // 切换HTML根元素的dark类
  document.documentElement.classList.toggle('dark', isDark.value)
}

// 组件挂载时执行
onMounted(() => {
  // 检查系统颜色偏好
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    isDark.value = true
    document.documentElement.classList.add('dark')
  }
  
  // 发送欢迎消息
  sendWelcomeMessage()
})
</script>

<template>
  <!-- 主容器 -->
  <div class="min-h-screen flex flex-col gradient-bg">
    <!-- 头部 -->
    <header class="glass-effect shadow-sm">
      <div class="container mx-auto px-4 py-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-white">DeepSeek Chat</h1>
        <!-- 主题切换按钮 -->
        <button
          @click="toggleDarkMode"
          class="btn-hover-effect p-2 rounded-full hover:bg-gray-700/50 transition-colors"
        >
          <span v-if="isDark" class="i-carbon-moon text-xl text-white" />
          <span v-else class="i-carbon-sun text-xl text-white" />
        </button>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-1 container mx-auto px-4 py-8">
      <!-- 聊天窗口组件 -->
      <ChatWindow 
        :messages="messages"
        :isLoading="isLoading"
        @send="sendMessage"
      />
    </main>

    <!-- 页脚 -->
    <footer class="glass-effect border-t border-white/10">
      <div class="container mx-auto px-4 py-4 text-center text-sm text-gray-400">
        &copy; 2023 DeepSeek. All rights reserved.
      </div>
    </footer>
  </div>
</template>
